<template>
	<div>
		<navigationBar :bgType="3" navigationTitle="我的" />

		<view class="wrap paddingBottom" :style="{ '--navigation-height': navigationHeight + 'px' }" v-if="dataInfo">
			<image class="wrap-bg" :src="getImageURL('navigationBar/bg_one.png')" mode="widthFix" />

			<view class="wrap-info flex align-center just-between">
				<image class="avatar" :src="dataInfo.avatar" />

				<view class="info">
					<view class="nickname fBold f-32 limit-num-line">
						{{ dataInfo.nickname }}
					</view>

					<view class="identity-bg">
						<view class="flex align-center">
							<image class="identity-img" :src="getImageURL('mine/mine_identity.png')" />

							<view class="identity-level f-24 limit-num-line">
								{{ dataInfo.is_technician == 1 ? "技师" : "普通用户" }}
							</view>
						</view>
					</view>
				</view>

				<image class="setting" :src="getImageURL('mine/setting.png')" @click="onSetting" />
			</view>

			<view class="wrap-wallet-bg">
				<image class="wallet-btm-img" :src="getImageURL('mine/mine_wallet_btm.png')" />

				<view class="wallet-title-bg flex align-center just-between">
					<image class="wallet-img" :src="getImageURL('mine/mine_wallet.png')" />
					<view class="wallet-title f-34"> 我的钱包 </view>
					<view class="recharge-btn f-26" @click="onRecharge"> 立即充值 </view>
				</view>

				<view class="balance-coupon-collect flex align-center">
					<block v-for="(item, index) in option_list" :key="index">
						<view class="item">
							<view class="flex column align-center just-center">
								<view class="num f-48"> {{ dataInfo[item.value] || "0" }}</view>

								<view class="name f-24"> {{ item.title }} </view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="wrap-invite-apply flex align-center just-between">
				<view class="item flex align-center">
					<image class="img-invite" :src="getImageURL('mine/mine_invite.png')" />

					<view class="right">
						<view class="title f-32"> 邀请有礼 </view>
						<view class="num-bg f-24"> 邀请新人 获得福利 </view>
					</view>
				</view>

				<view class="item flex align-center" @click="onApply">
					<image class="img-apply" :src="getImageURL('mine/mine_apply.png')" />

					<view class="right">
						<view class="title f-32"> 技师招募 </view>
						<view class="num-bg f-24"> 人才招募 福利多多 </view>
					</view>
				</view>
			</view>

			<view class="wrap-tool">
				<view class="tool-title fBold f-32 flex align-center"> 常用工具 </view>

				<view class="tool-list flex">
					<block v-for="(item, index) in toolList" :key="index">
						<view class="item flex column align-center" @click="$handle(item)">
							<image :src="getImageURL(item.file)" class="img" />

							<view class="title limit-num-line f-22">{{ item.title }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import { getUserInfo } from "@/API/mine.js";
	export default {
		props: {
			/**
			 * 用户状态
			 */
			userStatus: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,

				dataInfo: null,
				toolList: [],

				option_list: [
					{ title: "我的余额", value: "money", handle: () => {} },
					{ title: "我的卡券", value: "coupon_num", handle: () => {} },
					{ title: "我的收藏", value: "like_num", handle: () => {} },
				],
			};
		},
		mounted() {
			uni.$on("onUserShow", () => {
				this.getData();
			});
			this.getData();
		},
		methods: {
			/**
			 * 设置
			 */
			onSetting() {
				uni.navigateTo({
					url: `/subPages/mine/setting`,
				});
			},
			/**
			 * 充值
			 */
			onRecharge() {
				uni.navigateTo({
					url: `/subPages/recharge/index`,
				});
			},
			/**
			 * 申请技师
			 */
			onApplyTechnician() {},
			/**
			 * 网络请求
			 */
			getData() {
				getUserInfo().then((res) => {
					this.dataInfo = res.data;

					this.toolList = [
						{
							title: "申请分销商",
							file: "mine/mine_sqfxs.png",
							handle: () => {},
						},
						{
							title: "招商加盟",
							file: "mine/mine_zsjm.png",
							handle: () => {},
						},
						{
							title: "申请渠道商",
							file: "mine/mine_sqqds.png",
							handle: () => {},
						},
						{
							title: "地址管理",
							file: "mine/mine_address.png",
							handle: () => {
								uni.navigateTo({
									url: `/subPages/mine/addressList`,
								});
							},
						},
						{
							title: "问题反馈",
							file: "mine/mine_wtfk.png",
							handle: () => {},
						},
						{
							title: "我的评价",
							file: "mine/mine_wdpj.png",
							handle: () => {},
						},
						{
							title: "退款售后",
							file: "mine/mine_tksh.png",
							handle: () => {
								// uni.navigateTo({
								// 	// url: `/subPages/technician/refundAfterSales/list`,
								// });
							},
						},
						{
							title: "联系客服",
							file: "mine/mine_lxkf.png",
							handle: () => {
								this.$filters.callPhone(this.dataInfo.ServiceMobile);
							},
						},
						{
							title: "切服务端",
							file: "mine/mine_qhfw.png",
							handle: () => {
								uni.$off("onUserShow");
								this.$stoarge.setUserStatus(2);
								this.$emit("update:userStatus", 2);
							},
						},
					];
					if (this.dataInfo.is_technician != 1) {
						this.toolList.pop();
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
		position: relative;
		z-index: 1;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;

		.wrap-info {
			margin-top: 40rpx;
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			overflow: hidden;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.info {
				--limit-num: 1;
				margin-left: 26rpx;
				margin-right: 20rpx;
				flex: 1;
				overflow: hidden;

				.nickname {
					color: $bg-text-color;
				}

				.identity-bg {
					display: inline-block;
					margin-top: 14rpx;
					background-color: rgba($color: #ffffff, $alpha: 0.5);
					border-radius: 40rpx;
					overflow: hidden;
					padding: 0 15rpx;
					text-align: center;

					> view {
						width: 100%;
						height: 40rpx;
					}

					.identity-img {
						width: 24rpx;
						height: 22rpx;
					}

					.identity-level {
						margin-left: 10rpx;
						color: white;
					}
				}
			}

			.setting {
				width: 36rpx;
				height: 32rpx;
			}
		}

		.wrap-wallet-bg {
			margin-top: 48rpx;
			width: 100%;
			position: relative;
			z-index: 2;

			.wallet-btm-img {
				position: absolute;
				left: -10rpx;
				bottom: 0rpx;
				width: 710rpx;
				height: 24rpx;
				z-index: 1;
			}

			.wallet-title-bg {
				width: 100%;
				height: 82rpx;
				overflow: hidden;
				border-top-left-radius: 44rpx;
				border-top-right-radius: 44rpx;
				background: #e1ebff;
				padding: 0 32rpx;
				box-sizing: border-box;

				.wallet-img {
					width: 32rpx;
					height: 32rpx;
				}
				.wallet-title {
					margin-left: 18rpx;
					flex: 1;
					color: $theme-color;
				}

				.recharge-btn {
					width: 146rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					background-color: $theme-color;
					color: $bg-text-color;
					border-radius: 26rpx;
					overflow: hidden;
				}
			}

			.balance-coupon-collect {
				background: $grad-theme-color;
				padding-top: 15rpx;
				width: 100%;
				height: 155rpx;
				overflow: hidden;
				white-space: nowrap;
				position: relative;
				z-index: 3;

				.item {
					display: inline-block;
					flex: 1;
					height: 155rpx;
					position: relative;
					z-index: 3;

					> view {
						width: 100%;
						height: 100%;

						.num {
							color: $bg-text-color;
						}

						.name {
							margin-top: 20rpx;
							color: $bg-text-color;
						}
					}
				}
			}
		}

		.wrap-invite-apply {
			margin-top: 30rpx;
			width: 100%;

			.item {
				width: 336rpx;
				height: 142rpx;
				background-color: white;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				box-sizing: border-box;
				padding: 0 30rpx;
				position: relative;

				> image {
					position: absolute;
					right: 0;
				}

				.img-invite {
					top: 18rpx;
					width: 116rpx;
					height: 116rpx;
				}

				.img-apply {
					top: 20rpx;
					width: 102rpx;
					height: 104rpx;
				}

				.right {
					flex: 1;
					overflow: hidden;

					.title {
						color: $title-color;
					}

					.num-bg {
						margin-top: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.wrap-tool {
			margin-top: 30rpx;
			width: 100%;
			box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;
			background-color: white;
			padding: 0 30rpx;
			box-sizing: border-box;

			.tool-title {
				width: 100%;
				overflow: hidden;
				height: 80rpx;
				border-bottom: 2rpx solid $separa-color;
				color: $title-color;
			}

			.tool-list {
				padding: 20rpx 0rpx;
				margin-left: -10rpx;
				width: calc(100% + 10rpx);
				overflow: hidden;
				flex-wrap: wrap;

				.item {
					margin-left: 10rpx;
					margin-bottom: 30rpx;
					width: 150rpx;
					overflow: hidden;

					.img {
						width: 72rpx;
						height: 72rpx;
					}

					.title {
						--limit-num: 1;
						margin-top: 14rpx;
						color: $title-color;
					}
				}
			}
		}
	}
</style>
